<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <h1>基本资料</h1>
     </el-header>
      <el-main>
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          >
          <el-form-item label="登录名称" prop="username">
            <el-input v-model="ruleForm.username" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="用户昵称" prop="nickname">
            <el-input v-model="ruleForm.nickname"/>
          </el-form-item>
          <el-form-item label="用户邮箱" prop="email">
            <el-input v-model="ruleForm.email" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              提交修改
            </el-button>
          </el-form-item>
        </el-form>
    </el-main>
  </el-container>
</div>
</template>
<script setup>
import { ref,onMounted} from 'vue'
//引入pinia
import {useUserStore} from '@/stores/token.js';
// 引入提示框
import { ElMessage } from 'element-plus'
//引入接口
import {gai} from '@/api/login.js';

//获取容器对象
const us=useUserStore(); 
//获取容器对象中的数据
console.log(us.denglu); 

// 定义表单数据
const ruleForm = ref({
  username:'',
  nickname: '',
  email: '',
})

//定义用于校验的表单对象
const ruleFormRef = ref(null)
// 校验规则
const rules=ref({
  nickname:[ // 表单项的prop
    {required:true,message:'请输入用户昵称',trigger:'blur'},
    {min:2,max:5,message:'长度在2到5个字符',trigger:'blur'}
  ],
  email:[ // 表单项的prop
    {required:true,message:'请输入用户邮箱',trigger:'blur'},
  ]
})

//准备后端参数
const chuancan=({
  id:us.denglu.id,
  nickname:'',
  email:'',
})
//向后端传值
const chuan=async()=>{
    console.log(chuancan);
    const res=await gai(chuancan);
    console.log(res);
    if(res.code==20011){
        ElMessage({
            message: res.msg,
            type: 'success',
        })
        // 更新 Pinia 中的用户信息
    us.denglu.nickname = chuancan.nickname;
    us.denglu.email = chuancan.email;

    // 清空表单中的昵称和邮箱
    ruleForm.value.nickname = '';
    ruleForm.value.email = '';
        
    }else{
        ElMessage.error(res.msg)
    }
}

//确认按钮
const submitForm=(obj)=>{
    console.log(obj);
    // 触发obj这个表单的校验规则 如果校验通过 则valid是true  否则是false
    obj.validate((valid)=>{
        if (valid) {
            ElMessage({
                message: '校验成功',
                type: 'success',
            })
            chuancan.nickname=ruleForm.value.nickname;
            chuancan.email=ruleForm.value.email;
            chuan();
        } else {
            ElMessage.error('校验失败')
        }
    })
}

//当页面加载完成时，执行onMounted
onMounted(()=>{
   ruleForm.value.username=us.denglu.username;
   ruleForm.value.nickname=us.denglu.nickname;
   ruleForm.value.email=us.denglu.email;
})
</script>


<style lang='scss' scoped>
.common-layout{
        border: 2px green solid; 
        width: 1000px;
        height: 600px;
        box-shadow: 0px 0px 5px 5px gainsboro;
    }
.el-header{
    display: flex;
    border-bottom: 2px gainsboro solid;
}
</style>